<template>
  <div class="layout">
    <div class="inner">
      <div class="login_top">
        <div class="login_top_img">
          <img src="../../../assets/login/login_log.png" alt="" />
        </div>
        <p class="login_top_border"></p>
        <p class="login_top_text">用客易达连接客户</p>
      </div>
      <div class="container">
        <div class="keyida_logo">
          <div>
            <img src="@/assets/image/account/keyida_logo.png" alt="" />
          </div>
        </div>
        <div class="select_account">请选择登录账号</div>
        <el-scrollbar class="outerFirm" >
          <div class="firmList">
            <Company v-for="(item,index) in corpList" :corps="item" :key="item.corp_id" :class="['firm_item', { active: index=== firmListId }]" @click="changeFirm(item,index)"></Company>
          </div>
        </el-scrollbar>
        <div class="copyright">
          <div class="copyright_text">Copyright©2021- 2022 keyid.com. 版权所有</div>
          <div class="copyright_text">增值电信业务经营许可证： 沪B2-20211704 | 沪ICP备2021020699号-2</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Company from './components/Company.vue'
import { UserState, UserInfo, PackageInfo, Menu } from '@/store/modules/type'
import { computed, ref } from 'vue'
import { chooseFirm } from '@/api/login'
import { useStore } from '@/store'
import router from '@/router'
const store = useStore()
const jumpUrl = ref(router.currentRoute)
const corpList = computed(() => {
  return store.state.user.accounts
})
const firmListId = ref(0)

const getMenusRelationHash = function (menus: Array<Menu>, hashMap: any): any {
  if (menus && menus.length > 0) {
    menus.forEach((item) => {
      hashMap[item.id] = item.pid
      if (item.children) {
        return getMenusRelationHash(item.children, hashMap)
      }
    })
  }

  return hashMap
}
const changeFirm = (firmItem: any, index: any) => {
  const {code} = firmItem
  firmListId.value = index
  const params = {code}
  chooseFirm(params).then((data: any) => {
    store.dispatch('user/login', data)
    router.push({ path: '/home' })
  })
}
</script>

<style lang="scss" scoped>
.layout {
  .inner {
  //  min-height: calc(100vh - 60px);
   min-height: 100vh;
    // min-height: 1050px;
    background: url('@/assets/image/account/account_bg.png') no-repeat;
    background-size: cover;
    position: relative;
  }
  .login_top {
    height: 60px;
    display: flex;
    align-items: center;
    background: #ffff;
    &_img {
      width: 95px;
      height: 23px;
      margin-left: 40px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    &_border {
      height: 20px;
      margin: 0 14px;
      border-left: 1px solid #d0d0d0;
    }
    &_text {
      font-size: 14px;
      line-height: 14px;
      color: #33302d;
    }
  }
  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    .keyida_logo {
      width: 191px;
      height: 47px;
      margin: 0 auto;
      padding-top: 136px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .select_account {
      padding: 16px 0 31px 0;
      font-size: 16px;
      color: #33302d;
      line-height: 16px;
      font-weight: 300;
    }
    .firmList {
      max-width: 1140px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .firm_item {
        margin: 0 10px 20px;
      }
      .active {
        background: rgb(255, 198, 158, 0.3);
        box-shadow: 0px 6px 18px 0px #e4e4e4;
      }
    }
    .copyright {
      text-align: center;
      position: absolute;
      bottom: 50px;
      .copyright_text {
        font-size: 14px;
        color: #696969;
        line-height: 20px;
      }
    }
  }
  .outerFirm {
    height: calc(100vh - 410px)
  }
}
</style>
